<template>
  <div id="table_top" style="height: 100%;">
    <!-- 按钮区域 -->
    <el-row id="table_button">
      <slot name="button"></slot>
    </el-row>

    <!-- 主表格区 -->
    <div :style="{ 'height': computeHeight }">
      <el-table ref="dataTableRef" border tooltip-effect="dark" height="100%" highlight-current-row sortable="custom"
        :lazy="treeProps.enable" :row-key="rowKey" :row-style="{ 'height': '20px', 'font-size': '12px' }"
        :header-cell-style="{ 'background-color': '#EEF1F6', 'font-size': '12px' }" :data="page.data"
        :tree-props="treeProps.props" :load="treeProps.method" :expand-row-keys="expandKeys"
        :show-summary="showSum.enable" :sum-text="showSum.text" :summary-method="showSum.method"
        :span-method="spanMethod" @selection-change="selectionChange" @cell-click="cellClick" @sort-change="sortChange">
        <slot name="column"></slot>
      </el-table>
    </div>

    <!-- 分页区 -->
    <el-pagination id="table_page" style="justify-content: flex-end;" layout="total, sizes, prev, pager, next, jumper"
      :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize"
      :total="Number(page.total)" @size-change="handleSizeChange" @current-change="handleCurrentChange" v-if="isPage">
    </el-pagination>
  </div>
</template>

<script lang="ts">
export default { name: 'AutumnTable' }
</script>

<script lang="ts" setup>
import { ref, onMounted, PropType, nextTick } from 'vue'
import { type Page, type TreePop, type ShowSum } from './type'

const props = defineProps({
  isPage: {
    type: Boolean,
    default: () => true
  },
  page: {
    type: Object as PropType<Page>,
    default: () => {
      return {
        pageNumber: 1,
        pageSize: 10,
        data: [],
        total: 0,
        pageSizes: [10, 20, 30, 50, 100, 200, 500]
      }
    }
  },
  // 树形表格
  treeProps: {
    type: Object as PropType<TreePop>,
    default: () => {
      return {
        enable: false,
        props: { hasChildren: 'isParent' },
        method: (tree: object, treeNode: object, resolve: Promise<any>) => { }
      }
    }
  },
  rowKey: {
    type: [String, Function],
    default: () => 'id'
  },
  height: {
    type: String,
    default: () => ''
  },
  // 尾部合计
  showSum: {
    type: Object as PropType<ShowSum>,
    default: () => {
      return {
        enable: false,
        text: '合计',
        method: (row: object) => { }
      }
    }
  },
  // 合并行
  spanMethod: {
    type: Function,
    defalut: () => (data: object) => { }
  },
  expandKeys: {
    type: Array,
    default: () => []
  }
})

// 计算表格高度
const computeHeight = ref('100%')
onMounted(() => {
  nextTick(() => {
    if (props.height) {
      computeHeight.value = props.height
    } else {
      const talbeButton = document.getElementById('table_button')
      const talbePage = document.getElementById('table_page')

      let currentHeight = talbeButton ? talbeButton.offsetHeight : 0
      currentHeight += talbePage ? 45 : 15
      computeHeight.value = `calc(100% - ${currentHeight}px)`
    }
  })
})

const emits = defineEmits(['changeSelect', 'clickCell', 'sortChange', 'changePage'])
// 表格多选
const selectionChange = function (selection: Array<object>) {
  emits('changeSelect', selection)
}

// 行点击
const cellClick = function (row: object, column: object, cell: object, event: Event) {
  emits('clickCell', row, column, cell, event)
}

// 排序
const sortChange = function () {
  emits('sortChange')
}

// 改变页码
const handleCurrentChange = function (val: number) {
  emits('changePage', val, props.page.pageSize)
}

// 改变每页展示数
const handleSizeChange = function (val: number) {
  emits('changePage', props.page.pageNumber, val)
}

</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 10px;
}

.el-pagination {
  margin-top: 5px;
  text-align: right;
}
</style>
